![THEOplayerで作成した動画プレイヤーに自前で用意したチャプターマーカーを追加してみた](https://devio2023-media.developers.io/wp-content/uploads/2020/09/200908_THEOplayer_webinar-1.png)
THEOplayerで作成した動画プレイヤーに自前で用意したチャプターマーカーを追加してみた
本日私が頂くのは THEOplayer です。
動画プレイヤーによく付随する機能として、チャプターがあります。
Youtube とかでも、シークバーがチャプター分割されている動画がありますよね。
※ こういうやつ
THEOplayerではチャプターマーカーと呼ばれています。 シークバーにカーソルを合わせると、THEOplayerのチャプターマーカーとタイトルが、ユーザーがコンテンツのさまざまな部分をより簡単に識別できるようにします。また、動画のお気に入りの部分を再訪することもできます。
今日は自前で用意したチャプターファイルを、THEOplayer を使って表示出来るようにしてみたいと思います。
THEOplayerは、WebVTT、SRT、およびその他のテキストトラック形式でのチャプターマーカーのロードをサポートしています。 今回はWebVTT形式のチャプターマーカーでやってみます。
※ WebVTTは、HTML5標準の一部であるプレーンテキスト形式であり、字幕やクローズドキャプションの提供にも使用されます。これらのWebVTTファイルは非常に単純で、ビデオの特定の時間範囲の章のタイトルが含まれています。
WebVTTファイル
以下のファイルを準備します。
00:00:00.000 --> 00:00:18.958
まではオープニング
というタイトルを表示する といった形式になります。
WEBVTT 1 00:00:00.000 --> 00:00:18.958 オープニング 2 00:00:18.958 --> 00:00:28.458 アジェンダ 3 00:00:28.458 --> 00:00:47.708 Freeプランで利用できる攻撃の種類 4 00:00:47.708 --> 00:01:01.708 デモホスト 5 00:01:01.708 --> 00:01:42.708 Gremlinへのサインアップとデモホストの起動 6 00:01:42.708 --> 00:04:05.000 CPU Attackの作成と実行 7 00:04:05.000 --> 00:06:11.000 Shutdown Attackの作成と実行 8 00:06:11.000 --> 00:07:36.000 Blackhole Attackの作成と実行 9 00:07:36.000 --> 00:07:49.000 まとめ
ファイルが準備できたら、http経由でアクセスできるところにアップロードします(s3やcloudinaryなど)
THEOplayerでチャプターマーカーを表示する
player.source = { ... textTracks : [{ kind : 'chapters', src : 'https://<<Path to vtt file>>', srclang : 'ja' }] };
textTracks
というプロパティを追加します。
- kind :
chapters
- src: vttファイルの場所
- srclang: チャプターの言語
IOSやAndroidアプリの場合は、以下のページを参考にしてください。
確認
上記画像のように、シークバーがvttファイルで設定した時間で分割され、ポインターを置くと画面中央部にタイトルが表示されています。
チャプターを作成して動画を分割し視覚化できると視聴者が動画の目的の部分を探すのに役立つので利用価値は高いのではないでしょうか? 今回の例のようなセミナー動画でとても便利だと思いました。 UXを向上させるために是非使っていきたいですね。
最後に今回のブログで使った動画を貼っておきます。